<template>
  <div class="page-right">
    <div class="title">
      <span>设备报警信息</span>
    </div>
    <div class="row-1">
      <div class="box yb">
        <div class="content">
          <ul>
            <li>
              温感报警
              <span>
                56
                <i class="red"> 23% </i>
              </span>
            </li>
            <li>
              烟感报警
              <span>
                92
                <i class="green">23%</i></span
              >
            </li>
            <li>
              手动报警
              <span>
                29
                <i class="green">23%</i></span
              >
            </li>
            <li>
              燃气泄漏
              <span>
                56
                <i class="green">23%</i></span
              >
            </li>
          </ul>
          <div class="policeInfo">
            <div>
                <p>1#</p>
                <div id="policeInfo1"></div>
                <h3>45</h3>
            </div>
            <div>
                <p>2#</p>
                <div id="policeInfo2"></div>
                <h3>46</h3>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="title">
      <span>空间信息</span>
    </div>
    <div class="row-2">
      <div class="box yb">
        <div class="content" id="spaceCharts"></div>
      </div>
    </div>
    <div class="title">
      <span>设备统计</span>
    </div>
    <div class="row-3">
      <div class="box yb">
        <div class="content" id="deviceCharts"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.drawDevice();
    this.drawSpaceInfo();
    this.drawPolice("policeInfo1")
    this.drawPolice("policeInfo2")
  },
  methods: {
    drawPolice(id){
      let myChart = this.$echarts.init(document.getElementById(id));
      let that = this;
      let option = {
            tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'none'
            }
        },
        grid: {
            top: '15%',
            right: '3%',
            left: '5%',
            bottom: '12%'
        },
        xAxis: [{
            type: 'category',
            data: ['制造业', '建筑业', '农林牧渔', '房地产', '金融业', '居民服务及其他', '金融业', '居民服务及其他'],
            axisLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,0.12)'
                }
            },
            axisLabel: {
                margin: 10,
                show:false,
                color: '#e2e9ff',
                textStyle: {
                    fontSize: 14
                },
            },
        }],
        yAxis: [{
            "axisTick":{       //y轴刻度线
              "show":false
            },
            axisLabel: {
                show:false,
                formatter: '{value}',
                color: '#e2e9ff',
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: 'rgba(255,255,255,1)'
                }
            },
            splitLine: {
                show:false,
                lineStyle: {
                    color: 'rgba(255,255,255,0.12)'
                }
            }
        }],
        series: [{
            type: 'bar',
            data: [3000, 4000, 5000, 4000, 3000, 4000,5000,4000],
            barWidth: '5px',
            itemStyle: {
                normal: {
                    color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(0,244,255,1)' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: 'rgba(0,77,167,1)' // 100% 处的颜色
                    }], false),
                    barBorderRadius: [30, 30, 30, 30],
                    shadowColor: 'rgba(0,160,221,1)',
                    shadowBlur: 4,
                }
            },
            label: {
                normal: {
                    show: false,
                    lineHeight: 30,
                    width: 80,
                    height: 30,
                    backgroundColor: 'rgba(0,160,221,0.1)',
                    borderRadius: 200,
                    position: ['-8', '-60'],
                    distance: 1,
                    formatter: [
                        '    {d|●}',
                        ' {a|{c}}     \n',
                        '    {b|}'
                    ].join(','),
                    rich: {
                        d: {
                            color: '#3CDDCF',
                        },
                        a: {
                            color: '#fff',
                            align: 'center',
                        },
                        b: {
                            width: 1,
                            height: 30,
                            borderWidth: 1,
                            borderColor: '#234e6c',
                            align: 'left'
                        },
                    }
                }
            }
        }]
      }
      myChart.setOption(option);
      window.onresize = function () {
        myChart.resize();
      };
    },
    drawSpaceInfo() {
      let myChart = this.$echarts.init(document.getElementById("spaceCharts"));
      let that = this;
      var labelStyle = {
        show: true,
        rich: {
          a: {
            color: "#fff",
            align: "center",
            fontSize: 20,
            fontWeight: "bold",
          },
          b: {
            color: "#fff",
            align: "center",
            fontSize: 10,
          },
        },
        formatter: function (params) {
          return "{a|" + params.value + "%}";
        },
        position: "center",
      };

      var itemStyles = function (color1, color2) {
        return {
          color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              //描边颜色,右/下/左/上
              offset: 0,
              color: color1,
            },
            {
              offset: 1,
              color: color2,
            },
          ]),
          borderColor: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              //描边颜色
              offset: 0,
              color: color1,
            },
            {
              offset: 1,
              color: color2,
            },
          ]),
          borderWidth: 8, //描边线宽
        };
      };

      let option = {
         title:
         [{
            text:'场馆',
            center: ["20%", "50%"],
            show:true,
            textStyle:{
                color:'#fff'
            },
            top:'80%',
            left:'5%'
        },{
            center: ["55%", "50%"],
            text:'办公区域',
            show:true,
            textStyle:{
                color:'#fff'
            },
            top:'80%',
            left:"35%"
        },{
          center: ["90%", "50%"],
            text:'其他区域',
            show:true,
            textStyle:{
                color:'#fff'
            },
            top:'80%',
            left:'70%'
        }],
        series: [
          {
            center: ["15%", "50%"],
            radius: ["48%", "50%"],
            clockWise: false, //饼图的扇区是否是顺时针排布
            hoverAnimation: false, //是否开启 hover 在扇区上的放大动画效果
            type: "pie",
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            itemStyle: itemStyles("rgba(209,226,112,1)", "rgba(175,191,86,1)"),
            data: [
              {
                name: " ",
                value: 20,
                itemStyle: {
                  borderWidth: 0,
                },
              },
              {
                name: "",
                label: labelStyle,
                value: 80,
              },
            ],
          },
          {
            center: ["50%", "50%"],
            radius: ["48%", "50%"],
            clockWise: false, //饼图的扇区是否是顺时针排布
            hoverAnimation: false, //是否开启 hover 在扇区上的放大动画效果
            type: "pie",
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            itemStyle: itemStyles("rgba(241,155,88,1)", "rgba(242,119,22,1)"),
            data: [
              {
                name: " ",
                value: 20,
                itemStyle: {
                  borderWidth: 0,
                },
              },
              {
                name: "",
                label: labelStyle,
                value: 80,
              },
            ],
          },
          {
            center: ["85%", "50%"],
            radius: ["48%", "50%"],
            clockWise: false, //饼图的扇区是否是顺时针排布
            hoverAnimation: false, //是否开启 hover 在扇区上的放大动画效果
            type: "pie",
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            itemStyle: itemStyles("rgba(220,122,111,1)", "rgba(190,65,85,1)"),
            data: [
              {
                name: " ",
                value: 20,
                itemStyle: {
                  borderWidth: 0,
                },
              },
              {
                name: "",
                label: labelStyle,
                value: 80,
              },
            ],
          },
        ],
      };
      myChart.setOption(option);
      window.onresize = function () {
        myChart.resize();
      };
    },
    drawDevice() {
      let myChart = this.$echarts.init(document.getElementById("deviceCharts"));
      let option = {
        radar: [
          {
            radius: "60%",
            name: {
              textStyle: {
                color: "rgba(250,250,250,0.6)",
                fontSize: 16,
              },
            },
            indicator: [
              {
                name: "消防",
                min: 0,
              },
              {
                name: "水系统",
                min: 0,
              },
              {
                name: "供电",
                min: 0,
              },
              {
                name: "通风",
                min: 0,
              },
              {
                name: "照明",
                min: 0,
              },
              {
                name: "交通",
                min: 0,
              },
            ],
            center: ["50%", "50%"], // 位置
            shape: "circle", //形状
            splitArea: {
              areaStyle: {
                color: "transparent", //圆环颜色
                shadowColor: "aqua", // 圆颜色
                shadowBlur: 10,
              },
            },
            axisLine: {
              lineStyle: {
                color: "#08585F", // 分割线
              },
            },
            splitLine: {
              lineStyle: {
                color: "#08585F", //圆线
                width: 2,
              },
            },
          },
        ],
        series: [
          {
            type: "radar",
            data: [
              {
                value: [0.72, 8.76, 12.11, 6.09, 33, 6],
                name: "",
                itemStyle: {
                  color: "#327BFA",
                  opacity: 0,
                },
                lineStyle: {
                  width: 0,
                  type: "dotted",
                },
                areaStyle: {
                  normal: {
                    color: {
                      type: "radial",
                      x: 0.5,
                      y: 0.5,
                      r: 0.5,
                      colorStops: [
                        {
                          offset: 0,
                          color: "rgba(50, 123, 250, 0.7)", // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "rgba(50, 123, 250, 0.3)", // 100% 处的颜色
                        },
                      ],
                      global: false, // 缺省为 false
                    },
                  },
                },
              },
              {
                value: [0.72, 8.76, 12.11, 6.09, 33, 6],
              },
            ],
          },
        ],
      };
      myChart.setOption(option);
      window.onresize = function () {
        myChart.resize();
      };
    },
  },
};
</script>

<style lang="stylus" scoped>
@import '../../../assets/css/varibles.styl';

.page-right {
  width: 3.16rem;
  z-index: 2;
  position: fixed;
  top: 1.12rem;
  right: 0.3rem;

  .title {
    height: 0.18rem;
    font-size: 0.18rem;
    font-family: Microsoft YaHei;
    font-weight: 700;
    color: #55e1e0;
    line-height: 0.18rem;
    margin-bottom: 0.22rem;
    background: linear-gradient(0deg, #5398f6, #e2eeff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(0, 0, 0, 0);
  }

  .row-1 {
    margin-bottom: 0.32rem;

    .box {
      width: 100%;
      height: 100%;
      // background: url('');
      position: relative;
      z-index: 0;

      .content {
        height: 3.07rem;
        .policeInfo{
          display:flex;
          width:100%
          justify-content:space-around
          div{
            margin-top:.1rem
            flex-shrink:0;
            width:50%
            p{
              font-size:.11rem
              text-align:center
            }
            div {
              width:100%
              height:.5rem
            }
            h3{
              font-size:.30rem
              color: #75c0ff;
              text-align:center
            }
          }
        }
        ul {
          padding: 0.05rem 0.1rem 0;

          li {
            line-height: 0.4rem;
            border-bottom: 1px dashed hsla(0, 0%, 100%, 0.3);
            padding: 0 0.1rem;
            clear: both;
            font-size: 0.14rem;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #ccc;

            span {
              float: right;
              font-size: 0.2rem;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #75c0ff;

              i {
                font-style: normal;
                font-size: 0.12rem;
                margin-left: 0.07rem;
                position: relative;
                top: -0.08rem;
              }

              i.red {
                color: #ff0004;
              }

              i.red:before {
                content: '←';
                position: absolute;
                left: 0;
                top: 0;
                font-size: 0.16rem;
              }

              i.green {
                color: #3bbc74;
              }

              i.green:before {
                content: '←';
                position: absolute;
                left: 0;
                top: 0;
                font-size: 0.16rem;
              }
            }
          }
        }
      }
    }
  }

  .row-2 {
    margin-bottom: 0.32rem;

    .box {
      width: 100%;
      height: 100%;
      // background: url('');
      position: relative;
      z-index: 0;

      .content {
        height: 1.57rem;
      }
    }
  }

  .row-3 {
    margin-bottom: 0.32rem;

    .box {
      width: 100%;
      height: 100%;
      // background: url('');
      position: relative;
      z-index: 0;

      .content {
        height: 2.53rem;
      }
    }
  }
}
</style>